<template>
  <div id="app"
       style="height: auto !important">
    <!--
    <div class="tab-content" style="overflow:scroll;">
      <router-view @updatewindowjson="routerView_updatewindowjson"
                   @switchtab="tabPage_switchTab" />
    </div>
    -->

    <div class="tab-content"
         style="position: static;overflow:scroll;">
      <router-view @updatewindowjson="routerView_updatewindowjson"
                   @switchtab="tabPage_switchTab"
                   @startPullDownRefresh="routerView_startPullDownRefresh"
                   @stopPullDownRefresh="routerView_stopPullDownRefresh" />
      </div>

      <div class="tab-bar"
           :style="{ background: backgroundColor }">
        <span :ref="tab.url"
              v-for="tab in tabs"
              class="item"
              @click="tab_click(tab.url)"
              :key="tab.pagePath">
          <img :src="$route.path.includes(tab.url) ? tab.selected : tab.normal"
               alt />
          <span :style="{
            color: $route.path.includes(tab.url) ? selectedColor : color,
          }">{{ tab.name }}</span>
        </span>
      </div>
    </div>
</template>

<script>
import Vue from 'vue';
//import scroller from 'vue-scroller';
//Vue.use(scroller);
import {PATH} from "oneutil";
import OneKit from "../../OneKit";
export default {
  name: "onekit-tabs",
  methods: {
    tab_click (path) {
      console.log(path);
      this.$router.replace(path);
    },
    scroller_onRefresh () {
      if (OneKit.current().onPullDownRefresh) {
        OneKit.current().onPullDownRefresh();
      }
    },
    scroller_infinite () {
      //this.$refs.scroller.finishInfinite(true)
      //  if (OneKit.current().onReachBottom) {
      //    OneKit.current().onReachBottom();
      //  }
    },
    routerView_updatewindowjson ({ WINDOW_JSON }) {
      this.$emit("updatewindowjson", { WINDOW_JSON });
    },
    tabPage_switchTab ({ url }) {
      url = "/" + PATH.rel2abs(OneKit.currentUrl(), url);
      this.$refs[url][0].click();
    },
    routerView_startPullDownRefresh () {
      // this.$refs.scroller.triggerPullToRefresh();
    },
    routerView_stopPullDownRefresh () {
      //   this.$refs.scroller.finishPullToRefresh();
    },
  },
  data () {
    return {
      refreshColor: "#ffffff",
      backgroundColor: "transparent",
      selectedColor: "#0f0",
      color: "#000",
      borderStyle: "black",
      tabs: [],
    };
  },
  mounted () {
    const APP_JSON = window.APP_JSON;
    const tabBar = APP_JSON.tabBar;

    if (tabBar.color) {
      Vue.set(
        this,
        "color",
        tabBar.color.startsWith("@")
          ? OneKit.theme()[tabBar.color.substr(1)]
          : tabBar.color
      );
    }
    if (tabBar.selectedColor) {
      Vue.set(
        this,
        "selectedColor",
        tabBar.selectedColor.startsWith("@")
          ? OneKit.theme()[tabBar.selectedColor.substr(1)]
          : tabBar.selectedColor
      );
    }

    if (tabBar.backgroundColor) {
      Vue.set(
        this,
        "backgroundColor",
        tabBar.backgroundColor.startsWith("@")
          ? OneKit.theme()[tabBar.backgroundColor.substr(1)]
          : tabBar.backgroundColor
      );
    }

    if (tabBar.borderStyle) {
      Vue.set(
        this,
        "borderStyle",
        tabBar.borderStyle.startsWith("@")
          ? OneKit.theme()[tabBar.borderStyle.substr(1)]
          : tabBar.borderStyle
      );
    }
    let data = [];
    for (let tab of tabBar.list) {
      const iconPath = tab.iconPath.startsWith("@")
        ? OneKit.theme()[tab.iconPath.substr(1)]
        : tab.iconPath;
      const selectedIconPath = tab.selectedIconPath.startsWith("@")
        ? OneKit.theme()[tab.selectedIconPath.substr(1)]
        : tab.selectedIconPath;

      data.push({
        name: tab.text,
        url: `/${tab.pagePath}`,
        normal: `/${iconPath}`,
        selected: `/${selectedIconPath}`,
      });
    }
    Vue.set(this, "tabs", data);

  },
};
</script>

<style scoped="scoped">
body {
  display: flex;
  flex-direction: column;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.tab-content {
  flex-grow: 1;
  height: calc(100% - 56px);
}

.tab-bar {
  height: 56px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.tab-bar .item {
  display: flex;
  font-size: 12px;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #000;
}

.tab-bar .item span.active {
  color: green;
}

.tab-bar .item img {
  width: 28px;
}
</style>
